<template>
    <div class="container">
        <view-box ref="viewBox">
            <flexbox orient="vertical">

                <flexbox-item>
                    <div class="banner">
                        <div class="bg-banner"></div>
                    </div>
                </flexbox-item>

                <flexbox-item>
                    <div class="text-box">
                        <div class="title">阿噹公司简介</div>
                        <div class="content">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            阿噹共享汽车是采用移动互联技术对无人值守
                            的租赁车辆进行分时计费的开放式汽车租赁平台，
                            是国内最专业的分时自助租车平台；整个过程基于互联网信
                            息传递和验证，不需要人工交接钥匙。
                            作为一种全新、时尚、绿色、便捷的交通出行模式，
                            目前阿噹共享汽车已经在广东、四川、湖南、湖北、云南落地，业务稳步发展，
                            未来我们将继续稳步向全国市场迈进并致力于提高汽车使用效率、
                            缓解城市交通拥堵、减少尾气排放，为改善城市环境做出我们的贡献。
                        </div>
                    </div>
                </flexbox-item>

                <flexbox-item>
                    <div class="text-box">
                        <div class="title">阿噹共享汽车加盟平台简介</div>
                        <div class="content">
                            <div class="sub_title">中国租车行业的“阿里巴巴”</div>
                            <div class="sub_content">
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                阿噹共享汽车连锁加盟致力打造中国共享租车行业的阿里巴巴，
                                为国内投资者提供一个强大的创业平台和支持后台。
                            </div>

                            <div class="sub_title">中国共享租车加盟行业强势品牌</div>
                            <div class="sub_content">
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                不同于传统连锁租车企业的“重自营、轻加盟”，
                                阿噹共享汽车首创了共享连锁的模式；
                                通过互联网平台共享+总部直营经验输出+加盟店连锁标准化管理，
                                让加盟店成本更低，服务更专业；让客户享受共享的价格、
                                连锁的服务，体验便宜又安全的分时租车。
                            </div>

                            <div class="sub_title">全国连锁营运的强力支撑</div>
                            <div class="sub_content">
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                阿噹共享汽车自主开发了国内领先的共享租车
                                系统管理平台及车况管理平台，
                                让客户所见即所得；成功开展了以租代购业务，彻底打通租与购的界线；
                                开创中国互联网共享汽车连锁租车品牌先河，以及专属的专业支持团队、
                                注重门店标准化、
                                成立“噹噹购车”专业汽车以租代购等，
                                线上线下联动，强力支持加盟店，大幅提升加盟店盈利点。
                            </div>
                        </div>
                    </div>
                </flexbox-item>

                <flexbox-item>
                    <div class="jmsq">
                        <span>加盟申请</span>
                    </div>
                </flexbox-item>

                <flexbox-item>
                    <div class="form">
                        <x-input title="姓名" name="realName" is-type="china-name"></x-input>
                        <x-input title="手机" name="mobile" is-type="china-mobile"></x-input>
                        <x-input title="地址" name="address"></x-input>
                        <x-input title="邮箱" name="email" is-type="email"></x-input>
                        <x-input title="留言" name="message"></x-input>
                    </div>
                </flexbox-item>

                <flexbox-item>
                    <div class="submit">
                        <x-button :gradients="['#eb5d11', '#eb5d11']">提交申请</x-button>
                    </div>
                </flexbox-item>

            </flexbox>
        </view-box>
    </div>
</template>

<script>
    import { ViewBox, Scroller, Swiper, Flexbox, FlexboxItem, Grid, GridItem, XInput, XButton } from 'vux'
    import BannerImg from '@/assets/swiper/swiper2.png'

    export default {
        name: 'Pthppjs',
        components: {
            ViewBox,
            Scroller,
            Swiper,
            Flexbox,
            FlexboxItem,
            Grid,
            GridItem,
            XInput,
            XButton
        },
        data() {
            return {
                BannerImg
            }
        },
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>
    .banner{
        height: 180px;
        display: block;
        .bg-banner{
            width: 100%;
            height: 100%;
            background: url("../../assets/swiper/swiper2.png") center center no-repeat;
            background-size: cover;
        }
    }
    .text-box{
        padding: 0 20px;
        margin-top: 20px;
        .title{
            text-align: center;
            color: #eb5d11;
            font-size: 18px;
            font-weight: bold;
            border: 2px solid #eb5d11;
            border-radius: 5px;
            box-shadow: 0px 0px 3px 3px #ffe4c6;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .content{
            color: #666666;
            font-size: 12px;

            .sub_title{
                margin-top: 10px;
                text-align: center;
                color: #eb5d11;
                font-size: 18px;
                font-weight: bold;
                margin-bottom: 10px;
            }
        }
        .ct{
            width: 100%;
            height: 400px;
            .ct-bg1{
                width: 100%;
                height: 100%;
                background: url("../../assets/zsjm/p1.jpg") no-repeat;
                //background-size: cover;
                background-size: 100% 100%;
            }
            .ct-bg2{
                width: 100%;
                height: 100%;
                background: url("../../assets/zsjm/p2.jpg") no-repeat;
                //background-size: cover;
                background-size: 100% 100%;
            }

        }
    }

    .jmsq{
        text-align: center;
        padding-left: 20px ;
        padding-right: 20px ;
        margin-top: 10px;
        span{
            display: inline-block;
            line-height: 40px;
            font-size: 22px;
            font-weight: bold;
            color: #eb5d11;
            border: 1px solid #eb5d11;
            width: 100%;
            border-radius: 5px;
            box-shadow: 0px 0px 20px #fef2ea;
        }
    }
    .form {
        text-align: center;
        padding-left: 20px ;
        padding-right: 20px ;
        .weui-cell {
            padding-left: 0;

        }
    }
    .submit{
        text-align: center;
        padding-left: 20px ;
        padding-right: 20px ;
    }
</style>